<script setup>
import { ref, onMounted } from 'vue'
import TypeSelecter from '@/components/TypeSelecter.vue'
import { Product_Types, Product_Timelines, Product_Amount, locations } from '@/mock'
import $router from '@/router'
import { useRoute } from 'vue-router'

const $route = useRoute()

const group = ref([
  { title: '产品类型', options: Product_Types },
  { title: '产品期限', options: Product_Timelines },
  { title: '产品额度', options: Product_Amount }
  // { title: '适用地区', options: locations }
])
const value = ref()

const products = ref([
  {
    id: '1',
    logo: '/mock/ji_gou/4_20230427135114A030.png',
    product: '房易贷',
    company: '',
    type: '',
    parent_type: '',
    tags: ['普惠金融', '新市民'],
    lilv: { label: '', value: '' },
    edu: { label: '', value: '' },
    qixian: { label: '', value: '' },
    result: ''
  },
  {
    id: '2',
    logo: '',
    product: '',
    company: '',
    type: '',
    parent_type: '',
    tag: [],
    lilv: { label: '', value: '' },
    edu: { label: '', value: '' },
    qixian: { label: '', value: '' },
    result: ''
  },
  {
    id: '2',
    logo: '',
    product: '',
    company: '',
    type: '',
    parent_type: '',
    tag: [],
    lilv: { label: '', value: '' },
    edu: { label: '', value: '' },
    qixian: { label: '', value: '' },
    result: ''
  }
])

onMounted(() => {})
</script>
<template>
  <section
    class="w-full mx-auto flex flex-column justify-content-center align-items-center h-24rem bg-no-repeat bg-cover"
    style="background-image: url(/mock/tzmn.9861b08b.png)"
  >
    <span class="text-7xl mb-5 text-white">金融产品</span>
    <div class="flex jsutify-content-center gap-3 h-4rem">
      <InputText
        type="text"
        class="w-24rem"
        size="large"
        v-model="value"
        placeholder="输入金融机构名称"
      />
      <InputText
        type="text"
        class="w-24rem"
        size="large"
        v-model="value"
        placeholder="输入产品名称"
      />
      <Button icon="pi pi-search" class="w-4rem" size="large" aria-label="Search" />
    </div>
  </section>
  <section class="w-full bg-white mb-5">
    <section class="container mx-auto flex flex-column gap-3 py-2">
      <TypeSelecter
        v-for="(item, index) in group"
        :key="index"
        :title="item.title"
        :options="item.options"
      />
    </section>
  </section>
  <!-- <section class="container mx-auto flex flex-column gap-3 py-4">摘要</section> -->
  <div class="w-full container mx-auto">
    <DataView :value="products" paginator :rows="5" class="surface-50">
      <template #list="slotProps">
        <Panel v-for="(item, index) in slotProps.items" :key="index" class="mb-5 shadow-none">
          <template #header>
            <div class="flex align-items-center gap-2">
              <img :src="item.logo" />
              <span class="mr-2 text-3xl font-bold">{{ item.product }}</span>
              <Tag v-for="tag in item.tags" :key="tag.value" class="mr-2" :value="tag"></Tag>
            </div>
          </template>
          <div class="flex p-3">
            <div class="flex-none w-9 flex justify-content-evenly gap-3">
              <section class="flex flex-column justify-content-start align-content-center">
                <span class="text-5xl font-medium">4.50-6.00%</span>
                <span>参考利率（年化）</span>
              </section>
              <section class="flex flex-column justify-content-start">
                <span class="text-5xl font-medium">4.50-6.00%</span>
                <span>参考利率（年化）</span>
              </section>
              <section class="flex flex-column justify-content-start align-content-center">
                <span class="text-5xl font-medium">4.50-6.00%</span>
                <span>参考利率（年化）</span>
              </section>
              <section class="flex flex-column justify-content-start">
                <span class="text-5xl font-medium">4.50-6.00%</span>
                <span>参考利率（年化）</span>
              </section>
            </div>
            <Divider layout="vertical" />
            <section
              class="flex flex-grow-1 flex-column justify-content-center align-content-center px-5"
            >
              <Button
                label="查看详情"
                class="w-full"
                size="large"
                @click="() => $router.push('/jrcp/detail')"
              />
              <div class="text-center">参考利率（年化）</div>
            </section>
          </div>
        </Panel>
      </template>
    </DataView>
  </div>
</template>
<style scoped>
:deep(.p-panel-header) {
  background-color: white;
}
:deep(.p-dataview-content) {
  background-color: var(--gray-50) !important;
}
</style>
